<template>
	<view class="content">
		<h1>{{ count }}</h1>
		<div>
			<button @click="addfn()">增加</button>
			<button @click="lessfn()">减少</button>
		</div>
		<h1>获取登录状态：{{ isLogin ? '已登录':'未登录' }}</h1>
		<div>
			<button @click="login()">改变登录状态</button>
		</div>
		<empty emptyTxt="暂无数据" :size="36" v-if="isEmpty"/>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex';
	import empty from '@/components/empty/index.vue';
	export default {
		components: {
			empty,
		},
		data() {
			return {
				isEmpty:true
			}
		},
		onLoad() {
		},
		computed: {
			...mapGetters([
				'count',
				'isLogin'
			])
		},
		methods: {
			login(){
				// this.$http.get('apisurl', {})
				// 	.then(res => {
				// 		this.$store.dispatch('isLogin', {
				// 			"isLogin": res.data.result.isLogin
				// 		})
				// })
				this.$store.dispatch('isLogin', {
					"isLogin": true
				})
			},
			addfn() {
				//提交名为addmu的mutations
				// this.$store.commit('addmu');
				//以载荷方式分发
				this.$store.dispatch('addac');
			},
			lessfn() {
				//提交名为lessmu的mutations
				this.$store.commit('lessmu');
				//以对象方式分发
				// this.$store.dispatch({
				// 	type: 'lessac'
				// });
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	h1 {
		margin: 40px 0;
		color: #000;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	button {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>
